<template>
  <Head>
    <!-- 基础 Meta -->
    <title>{{ computedTitle }}</title>
    <meta name="description" :content="description" />
    <meta v-if="keywords" name="keywords" :content="keywords" />
    <link v-if="canonical" rel="canonical" :href="canonical" />
    
    <!-- Open Graph (Facebook, LinkedIn等) -->
    <meta property="og:type" :content="ogType" />
    <meta property="og:title" :content="computedTitle" />
    <meta property="og:description" :content="description" />
    <meta v-if="image" property="og:image" :content="image" />
    <meta v-if="canonical" property="og:url" :content="canonical" />
    <meta property="og:site_name" :content="actualSiteName" />
    <meta property="og:locale" content="zh_CN" />
    
    <!-- Twitter Card -->
    <meta name="twitter:card" :content="twitterCard" />
    <meta name="twitter:title" :content="computedTitle" />
    <meta name="twitter:description" :content="description" />
    <meta v-if="image" name="twitter:image" :content="image" />
    
    <!-- 产品特定的 Meta -->
    <meta v-if="price" property="product:price:amount" :content="price" />
    <meta v-if="price" property="product:price:currency" content="CNY" />
    <meta v-if="availability" property="product:availability" :content="availability" />
  </Head>
  
  <!-- JSON-LD 结构化数据 -->
  <Teleport to="head" v-if="jsonLd">
    <component :is="'script'" type="application/ld+json" v-text="jsonLd"></component>
  </Teleport>
</template>

<script setup>
import { computed } from 'vue'
import { Head, usePage } from '@inertiajs/vue3'

const page = usePage()

const props = defineProps({
  title: { type: String, default: '' },
  description: { type: String, default: '' },
  keywords: { type: String, default: '' },
  image: { type: String, default: '' },
  canonical: { type: String, default: '' },
  ogType: { type: String, default: 'website' },
  twitterCard: { type: String, default: 'summary_large_image' },
  siteName: { type: String, default: '' },
  price: { type: [Number, String], default: null },
  availability: { type: String, default: '' },
  jsonLd: { type: String, default: '' }
})

// 获取站点名称：优先使用传入的 siteName，然后是系统设置，最后是默认值
const actualSiteName = computed(() => {
  return props.siteName || 
         page.props.systemSettings?.site_name || 
         page.props.systemSettings?.seo_title || 
         'Orange Tech'
})

const computedTitle = computed(() => {
  return props.title ? `${props.title} - ${actualSiteName.value}` : actualSiteName.value
})
</script>

